<template>
  <div class="ui-filter-more">
    <ui-popover
      v-model="showPopover"
      placement="bottom-end"
    >
      <template slot="reference">
        <ui-button type="primary" link>
          <ui-icon size="18px">
            <svg v-if="showPopover" t="1680482233621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M544.716 589.036l0.856 0.816 224.016 220-56.056 57.08-196.676-193.156-207.456 193.84-54.62-58.452 235.456-220a40 40 0 0 1 54.48-0.128z m-235.32-438.64l207.46 193.84 196.68-193.156 56.052 57.08-224.016 220-0.856 0.816a40 40 0 0 1-54.48-0.128l-235.456-220L309.4 150.392z" fill="currentColor"></path>
            </svg>
            <svg v-else t="1680482233621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path fill="currentColor" d="M200.864 160.8l-1.04 0.012c-33.704 0.804-51.472 40.748-29.048 66.344l228.96 261.392v251.868a40 40 0 0 0 16.788 32.576l160.188 114.132 0.852 0.592c26.408 17.872 62.36-1 62.36-33.168v-366.684l215.684-261.62c21.508-26.092 2.952-65.444-30.864-65.444H200.864z m539.06 79.996l-170.864 207.268-0.864 1.088a40 40 0 0 0-8.272 24.356v303.424l-80.188-57.132v-246.292l-0.024-1.384a40 40 0 0 0-9.888-24.972L289.072 240.796h450.852z"></path>
            </svg>
          </ui-icon>
          更多筛选
        </ui-button>
      </template>
      <div class="ui-filter-more__main" v-if="items && items.length">
        <div class="ui-filter-more__list">
          <div
            class="ui-filter-more__item"
            v-for="(item, index) in items"
            :key="index"
          >
            <span class="ui-filter-more__item-label" :style="itemLabelStyle">
              {{ item.props.label }}
            </span>
            <div class="ui-filter-more__item-target">
              <component :is="handleRenderItem(item)"></component>
            </div>
          </div>
        </div>
        <div class="ui-filter-more__toolbar">
          <ui-button type="primary" link>
            <ui-icon slot="icon">
              <svg t="1680482233621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M233.088 189.141333A425.002667 425.002667 0 0 1 512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667 0 91.136-28.586667 175.616-77.226667 244.906667L725.333333 512h128A341.333333 341.333333 0 0 0 275.626667 265.728l-42.538667-76.586667z m557.824 645.717334A425.002667 425.002667 0 0 1 512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512c0-91.136 28.586667-175.616 77.226667-244.906667L298.666667 512H170.666667a341.333333 341.333333 0 0 0 577.706666 246.272l42.538667 76.586667z" fill="currentColor" p-id="25774"></path></svg>
            </ui-icon>
            重置过滤条件
          </ui-button>
        </div>
      </div>
    </ui-popover>
  </div>
</template>
<script>
export default {
  name: 'UiFilterMore',
  props: {
    value: {
      type: Object
    },
    items: {
      type: Array,
      required: true
    },
    labelWidth: {
      type: String,
      default: '80px'
    }
  },
  data () {
    return {
      showPopover: false
    }
  },
  computed: {
    itemLabelStyle () {
      const style = {}
      if (this.labelWidth) {
        style.width = this.labelWidth
        style['min-width'] = this.labelWidth
      }
      return style
    }
  },
  methods: {
    handleRenderItem(item) {
      return {
        functional: true,
        render: (h, c) => {
          return item.render(h, c)
        }
      }
    }
  }
}
</script>
<style lang="less">
.ui-filter-more__main{
  width: 420px;
}
.ui-filter-more__list{
  padding: 6px;
}
.ui-filter-more__item{
  display: flex;
  flex-direction: row;
  line-height: 32px;
  padding: 6px;
}
.ui-filter-more__item-label {
  color: #666;
}
.ui-filter-more__item-target{
  flex: 1;
  min-width: 0;
}
.ui-filter-more__toolbar{
  border-top: 1px solid #eee;
  padding: 9px 12px;
}
</style>
